<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {addCategory, deleteCategory, getCategoryInfo, updateCategory} from "@/api/merchantCategory";


interface Info {
  name:string,
  id?:number,
  updateTime?:string
}
@Component({
  name:'PlatformCategory'
})
export default class index extends Vue {
  private categoryName = ''
  private selectedCategory:number[] = []
  private categoryInfo = []
  private currentPage = 1
  private pageSizes = [5,7,9,11]
  private pageSize = 7
  private total = null as number
  private dialogVisible = false
  private isAdd = false
  private updateInfo:Info = {
    name:'',
    id:null
  }


  @Watch('categoryName')
  onChangeValue(newVal:string, oldVal:string) {
    if(newVal==='')
      this.getCategoryInfo()
  }

  created(){
    this.getCategoryInfo()
  }

  async getCategoryInfo(pager=1){
    this.currentPage = pager
    const {data} = await getCategoryInfo(this.categoryName, this.currentPage, this.pageSize)
    console.log(data)
    if(data.code===1) {
      this.categoryInfo = data.data.records
      this.total = data.data.total
      console.log(this.categoryInfo)
    }
  }

  add(){
    this.isAdd = true
    this.dialogVisible = true
    this.updateInfo = Object.assign({}, {
      name:''
    })
  }

  async deleteCategory(){
    const {data} = await deleteCategory(this.selectedCategory)
    if(data.code===1) {
      this.$message.success({
        message:'删除成功'
      })
      await this.getCategoryInfo(this.currentPage)
    }else {
      this.$message.error({
        message:'删除失败'
      })
    }
  }

  updateCategoryInfo(row) {
    this.isAdd = false
    this.dialogVisible = true
    this.updateInfo = Object.assign({}, row)
    delete this.updateInfo.updateTime
    console.log("updateinfo", this.updateInfo)
  }

  handleSizeChange(newSize){
    this.pageSize = newSize
    this.getCategoryInfo(this.currentPage)
  }

  handleCurrentChange(newPage){
    this.currentPage = newPage
    this.getCategoryInfo(this.currentPage)
  }

  handleSelectionChange(categoryList:[]) {
    if(categoryList.length!==0) {
      this.selectedCategory = []
      categoryList.forEach((item:any)=>{
        this.selectedCategory.push(item.id)
      })
    }else {
      this.selectedCategory = []
    }
  }

  async deleteOneCategory(row) {
    this.selectedCategory = []
    this.selectedCategory.push(row.id)
    await this.deleteCategory()
  }

  async confirmUpdateInfo(){
    if(Object.values(this.updateInfo).some(values=>{
      return values===null||values===undefined||values===''
    })) {
      this.$message.warning({
        message:'请填写完整信息'
      })
    }else {
      const {data} = this.isAdd?await addCategory(this.updateInfo):await updateCategory(this.updateInfo)
      if(data.code===1) {
        this.$message.success({
          message:'修改成功'
        })
        this.dialogVisible=false
        if(this.isAdd) {
          await this.getCategoryInfo()
        }else {
          await this.getCategoryInfo(this.currentPage)
        }
      }else {
        this.$message.error({
          message:'修改失败'
        })
      }
    }
  }

  beforeClose(){
    this.dialogVisible = false
  }
}
</script>

<template>
  <el-card class="card">
    <el-form :inline="true">
      <el-form-item label="分类名称:" style="margin:0 30px">
        <el-input v-model="categoryName" style="width: 240px" placeholder="请填写分类名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="!categoryName" @click="getCategoryInfo()" type="primary">查询</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button @click="add()" type="info" icon="el-icon-add">添加分类</el-button>
      </el-form-item>
      <el-form-item style="float: right;margin-right: 30px">
        <el-button :disabled="!selectedCategory.length" @click="deleteCategory" type="danger" icon="el-icon-delete">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="categoryInfo" border @selection-change="handleSelectionChange">
      <el-table-column width="70px" type="selection"></el-table-column>
      <el-table-column align="center" label="分类id" prop="id"></el-table-column>
      <el-table-column align="center" label="分类名称" prop="name"></el-table-column>
      <el-table-column align="center" label="最后操作时间" prop="updateTime"></el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="{row}">
          <el-button @click="updateCategoryInfo(row)" type="primary" size="small" icon="el-icon-document"></el-button>
          <el-button @click="deleteOneCategory(row)" type="danger" size="small" icon="el-icon-close"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   background
                   hide-on-single-page
                   :current-page="currentPage"
                   :page-sizes="pageSizes"
                   :page-size="pageSize"
                   class="userList"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :total="total"
                   style="margin-top: 20px;text-align: center"
    ></el-pagination>
    <el-dialog style="margin-top: 20vh"
      :visible="dialogVisible" :before-close="beforeClose" width="42%">
      <template v-slot:title>
        <h2>修改</h2>
      </template>
      <template v-slot:default>
        <el-form style="width: 50%;margin-left: 25%" label-width="right">
          <el-form-item label="分类名称:">
            <el-input v-model="updateInfo.name" placeholder="名称" style="width: 200px"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:footer>
        <el-button size="small" @click="()=>dialogVisible=!dialogVisible">取消</el-button>
        <el-button @click="confirmUpdateInfo()" style="margin-right: 40%" size="small" type="primary">确定</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<style scoped lang="scss">
.card {
  margin: 30px;
}
</style>
